import React, {Component} from 'react';
import ReactDOM from 'react-dom/client';
import styled from 'styled-components'
import {Button, Space, Table, Tag} from 'antd';

const { Column, ColumnGroup } = Table;
const data: DataType[] = [
    {
        key: '1',
        name: '张三',
        age: 32,
        address: '上海',
        tags: ['nice', 'developer'],
    },
    {
        key: '2',
        name: '李四',
        age: 42,
        address: '上海',
        tags: ['loser'],
    },
    {
        key: '3',
        name: '王五',
        age: 32,
        address: '上海',
        tags: ['cool', 'teacher'],
    },
];
interface DataType {
    key: React.Key;
    name: string;
    age: number;
    address: string;
    tags: string[];
}
const App: React.FC = () => (
    <Table dataSource={data}>
        <Column title="Name"  dataIndex="name" key="name" />
        <Column title="Age" dataIndex="age" key="age" />
        <Column title="Address" dataIndex="address" key="address" />
        <Column
            title="Tags"
            dataIndex="tags"
            key="tags"
            render={(tags: string[]) => (
                <>
                    {tags.map(tag => (
                        <Tag color="blue" key={tag}>
                            {tag}
                        </Tag>
                    ))}
                </>
            )}
        />
        <Column
            title="Action"
            key="action"
            render={(_: any, record: DataType) => (
                <Space size="middle">
                    <a>Invite {record.name}</a>
                    <a>Delete</a>
                </Space>
            )}
        />
    </Table>
);

// const App: React.FC = () => (
//     <React.StrictMode>
//         <Appwrapper>
//             {/*<div className="test"></div>*/}
//             <Button type="primary">Primary</Button>
//         </Appwrapper>
//     </React.StrictMode>
// )

class Counter extends React.Component{
    state = {
        username : '状态'
    }
    render() {
        const { username } = this.state
        return  <div>{username}</div>
    }
}

//样式
export const Appwrapper = styled.div`
  .test {
    width: 100px;
    height: 100px;
    background-color: red;
  }

  .originalValue {
    color: #282c34;
  }
`
export default App;
